<template>
  <div class="container">
    <!-- 登录头部 -->
    <van-nav-bar
      title="登录"
    >
    <van-icon
    slot="left"
    name="cross"
    @click="$router.push('/tab-bar/my')"
    class="login-close"></van-icon>
    </van-nav-bar>
    <!-- /登录头部 -->
    <!-- 表单区域 -->
    <van-form @submit="loginFormSubmit" ref="loginFormRef" class="login-form">
      <van-field
        v-model="loginForm.mobile"
        name="mobile"
        placeholder="请输入手机号"
        maxlength="11"
        type="number"
        :rules="loginFormRules.mobile"
      >
      <i slot="left-icon" class="newsfont newsshouji"></i>
      </van-field>
      <van-field
        v-model="loginForm.code"
        type="number"
        name="code"
        maxlength="6"
        placeholder="请输入密码"
        :rules="loginFormRules.mobile.code"
      >
      <i slot="left-icon" class="newsfont newsyanzhengma"></i>
      <template #button>
        <div class="sent-sms-btn">
          <i class="vertical-line"></i>
          <van-button native-type="button" round v-if="toggleSendSmsBtn" class="obtain-btn" @click="sendSmsCode">获取验证码</van-button>
          <van-count-down auto-start :time="1000 * 60" v-else format="ss 秒" @finish="toggleSendSmsBtn = true"/>
        </div>
      </template>
      </van-field>
      <div class="login-submit-btn">
        <van-button block type="info" native-type="submit">登 录</van-button>
      </div>
    </van-form>
    <!-- /表单区域 -->
    <!-- 底部隐私条款 -->
    <div class="footer">
      <p>隐私条款</p>
    </div>
    <!-- /底部隐私条款 -->
  </div>
</template>

<script>
import { loginSMS, login } from '@/api/users.js'
import '@/store/index'
export default {
  name: 'LoginIndex',
  data () {
    return {
      // 用户登录输入框双向绑定
      loginForm: {
        mobile: '',
        code: ''
      },
      // 输入表单验证
      loginFormRules: {
        mobile: [{
          required: true, message: '手机号码必须填写...'
        }, {
          pattern: /^1[3|4|5|6|7|8|9]\d{9}$/, message: '必须输入正确的11位手机号码...'
        }],
        code: [{
          required: true, message: '手机验证码必须填写...'
        }, {
          pattern: /^\d{6}$/, message: '手机验证码必须为6位数字...'
        }]
      },
      // 倒计时隐藏
      toggleSendSmsBtn: true
    }
  },
  methods: {
    // 表单提交事件
    async loginFormSubmit () {
      const user = this.loginForm
      this.$toast.loading({
        message: '加载中...',
        duration: 0,
        forbidClick: true
      })
      try {
        const { data: res } = await login(user)
        this.$store.commit('setUser', res.data)
        this.$toast.success('登录成功！')
        this.$router.push('/tab-bar/my')
      } catch (err) {
        if (err.response !== 400) return this.$toast.fail('登录失败，请稍后重新尝试登录！')
        this.$toast.fail('对不起，验证码已失效，请稍后重试！')
      }
    },
    // 发送手机短信验证码
    async sendSmsCode () {
      // 验证手机号
      try {
        await this.$refs.loginFormRef.validate('mobile')
      } catch (err) {
        this.$toast.fail('手机号码错误或不合法！')
      }
      // 验证通过，显示倒计时
      this.toggleSendSmsBtn = false
      // 发送请求
      try {
        await loginSMS(this.loginForm.mobile)
        this.$toast.success('手机验证码已发送，请查收！')
      } catch (err) {
        if (err.response.status === 429) return this.$toast.fail('请勿频繁发送验证码...')
        this.$toast.fail('数据异常，请稍后重试...')
      }
    }
  }
}
</script>

<style lang="less" scoped>
// 头部登录区域
/deep/ .van-nav-bar__content {
  height: 128px!important;
}
.login-close {
  color: #ffffff;
  font-size: 30px;
}

// 表单区域样式
.container {
  height: 100%;
}
.login-form {
  .newsfont {
    font-size: 37px;
    margin-right: 30px;
  }
  .login-submit-btn {
    margin-top: 53px;
    padding: 0 23px;
    .van-button {
      background-color: #6db4fb;
      border: none;
    }
  }
  .sent-sms-btn{
    display: flex;
    .vertical-line {
    display: inline-block;
    width: 2px;
    height: 46px;
    margin-right: 20px;
    background-color: #eeeeee;
    }
    .obtain-btn {
    background-color: #ededed;
    padding: 0;
    width: 152px;
    height: 46px;
    font-size: 22px;
  }}
  }
// 底部区域
.footer {
  margin-top: 804px;
  min-height: 100%;
  font-size: 25px;
  text-align: center;
  color: #666666;
}
</style>
